<script type="text/x-template" id='top'>
    <div>
        <div class="head" style="position:relative;">
            <div class="head-top">
                <div class="left">
                    <img alt="" src="http://pay.wao021.cn/Static/sun.png">
                    <span>{{initData.userinfo.lianxu}}</span>
                </div>
                <div class="right">
                    <a href="<?php echo $this->createMobileUrl('my');?>">
                        <img alt="" :src="initData.userinfo.headimgurl">
                    </a>
                </div>
            </div>
            <span class="text1">
                明日打卡可平分金额(元)
            </span>
            <span class="money">{{initData.allMoney}}</span>
            <span class="text2">
                当前有
                <span class="text3">{{initData.allMoney}}</span>
                人参与打卡挑战
            </span>
            <div>
                <div class="headimgs">
                    <div style="padding-left: 3%;">
                        <template v-for="item in initData.headlist">
                            <img alt='' :src="item.headimgurl"/>
                        </template>
                    </div>
                </div>
            </div>
            <br>
            <span  class="rule-title">挑战规则</span>
            <div class="rule-content">
                <p>
                    <span>1</span>
                    &nbsp;&nbsp; 支付一元加入挑战
                </p>
                <p>
                    <span>2</span>
                    &nbsp;&nbsp; 早上{$config['daka_start_time']}-{$config['daka_end_time']}打卡
                </p>
                <p>
                    <span>3</span>
                    &nbsp;&nbsp; 准时打卡的人平分挑战金
                </p>
            </div>
            <?php if($config['sub_url']){ ?>
            <a href="{$config['sub_url']}" class="sub-msg">收藏打卡</a>
            <?php } ?>
        </div>
        <div class="pay">
            <div style="padding:0 5%;">
                <a 
                    v-if="isPay"
                    style="color:#fff;background:#FF8019;transform:none;borderRadius:0;boxShadow:-1px 1px 5px rgb(255, 128, 25);"
                    @click="getPayData" class="weui-btn weui-btn_primary">支付一元参与挑战</a>
                <a 
                    v-if="isQiandao"
                    style="color:#fff;background:#e94f4f;transform:none;borderRadius:0;boxShadow:-1px 1px 5px rgb(255, 128, 25);"
                    @click="daka" class="weui-btn weui-btn_primary">立即打卡</a>
                <a 
                    v-if="!isPay && !isQiandao && initData.daojishi>0"
                    style="color:#fff;background:#FF8019;transform:none;borderRadius:0;boxShadow:-1px 1px 5px rgb(255, 128, 25);"
                    class="weui-btn weui-btn_primary">打卡倒计时{{daojishi}}</a>
            </div>
        </div>
        <div style="text-align:center;" className="result">
            <span style="display:block;font-size:25px">今日打卡战况</span>
            <div style="padding:10px 0;color:#999;">
                <span style="color:#1cc721">{{initData.successNumber}} </span>已打卡
                <span style="padding:0 10px;">|</span>
                <span style="color:#1cc721">{{initData.failNumber}} </span>未打卡
            </div>
        </div>
    </div>
</script>
<script>
    var indexTop = Vue.component('index-top',{
        template: '#top',
        data: function () {
            return {
                msg: 'hello',
                initData: {
                    allMoney: 0,
                    allNumber: 0,
                    headlist: [],
                    daojishi:0,
                    interval: false,
                    successNumber:0,
                    failNumber:0,
                    myyesterday: {
                        status: true,
                        checked: true
                    },
                    mytoday: {
                        status: true,
                        checked: true
                    },
                    time:{
                        h:0,i:0,s:0
                    },
                    userinfo: {
                        lianxu:0,
                        nickname:'',
                        headimgurl:''
                    },
                    now:'00:00'
                }
            };
        },
        created: function () {
            this.init();
        },
        beforeDestroy: function () {
            window.clearInterval(this.interval);
        },
        computed: {
            daojishi: function () {
                var date3 = this.initData.daojishi;
                var leave1=date3%(24*3600);
                var hours=Math.floor(leave1/(3600));
                var leave2=leave1%(3600);
                var minutes=Math.floor(leave2/(60));
                var leave3=leave2%(60);
                var seconds=Math.round(leave3);
                var res = '';
                if(hours>0) {
                    res += hours+"时";
                    res += minutes+"分";
                }else if(minutes>0){
                    res += minutes+"分";
                }
                res += seconds+"秒";
                return res;
            },
            isQiandao: function () {
                var initData = this.initData;
//                if(initData.time.h<5 || initData.time.h>=8) {
//                    return false;
//                }
                if(window.parseInt(initData.myyesterday.status)!==1 || window.parseInt(initData.myyesterday.checked)===1) {
                    return false;
                }
                if(initData.daojishi>0) {
                    return false;
                }
                return true;
            },
            isPay: function () {
                var initData = this.initData;
                if(window.parseInt(initData.mytoday.status)===1) {
                    return false;
                }
                if(initData.now>='00:00' && initData.now<'{php echo $this->config["daka_start_time"];}') {
                    if(window.parseInt(initData.myyesterday.status)===1) {
                        return false;
                    }
                }
                if(initData.now>='{php echo $this->config["daka_start_time"];}' && initData.now<'{php echo $this->config["daka_end_time"];}') {
                    if(window.parseInt(initData.myyesterday.status)===1 && window.parseInt(initData.myyesterday.checked)===0) {
                        return false;
                    }
                }
                return true;
            }
        },
        methods: {
            init: function () {
                var self = this;
                http({
                    url: baseUrl + 'initdata'
                })
                .then(function(res){
                    res = res.data;
                    self.initData = res.data;
                    self.daojishi = self.initData.daojishi;
                    self.interval = window.setInterval(function(){
                        if(self.initData.daojishi<=0) {
//                            self.initData.time.h=5;
                            window.clearInterval(self.interval);
                        }
                        self.initData.daojishi--;
                    },1000);
                });
            },
            getPayData: function () {
                var self = this;
                http({
                    url: baseUrl + 'getpayinfo'
                })
                .then(function(res){
                    console.log(res);
                    res = res.data;
                    if(res.ret==0) {
                        var data = res.data;
                        self.pay(data);
                    }else{
                        layer.open({
                           type: 2,
                           content: res.message
                        });
                        location.href=res.url;
                    }
                });
            },
            pay: function (data) {
                var self = this;
                document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
                    util.pay({
                        orderFee : data.orderFee,
                        payMethod : 'wechat',
                        orderTitle : data.orderTitle,
                        orderTid : data.orderTid,
                        module : data.module,
                        success : function(result) {
                            //alert('支付成功');
                        },
                        fail : function(result) {
                            alert('fail : ' + result.message);
                        },
                        complete : function(result) {
                            location.reload();
                        }
                    });
                });
            },
            daka: function () {
                var self = this;
                http({
                    url: baseUrl + 'daka'
                })
                .then(function(res){
                    res = res.data;
                    if(res.ret!=0) {
                        return false;
                    }
                    layer.open({
                        content: '打卡成功，是否继续挑战',
                        btn: ['继续挑战', '取消'],
                        yes: function(index){
                            layer.closeAll();
                            self.getPayData();
                        },
                        no: function () {
                            location.reload();
                        }
                    });
                });
            }
        }
    })
</script>
